<template>
  <div
      v-loading="commentLoading"
      class="reply-comment">
    <template v-if="!showNoFocus">
      <el-input
          v-model="commentsTextarea"
          :rows="3"
          :maxlength="2000"
          show-word-limit
          type="textarea"
          placeholder="请输入评论内容"
          @blur="blurFun"/>
      <div class="btn-group">
        <el-popover v-model:visible="showEmoji" placement="top"
                    width="400" trigger="click">
          <!-- 表情 -->
          <emoji @select="selectEmoji"/>
          <template v-slot:reference>
            <i  class="wk wk-expression smiling-img"/>
          </template>

        </el-popover>
        <div class="btn-box">
          <el-button
              type="primary"
              @click="commentSubmit">评论
          </el-button>
          <el-button @click="closeComment">取消</el-button>
        </div>
      </div>
    </template>

    <div
        v-else
        class="no-focus"
        @click="toggleFocus()">
      请输入评论内容
    </div>
  </div>
</template>


<script setup>
/**
 * 评论输入框
 * event:      close 关闭输入框
 *             reply 确认输入  参数： {String} 输入框值
 *             toggle 状态切换
 * public fn:  toggleFocus 切换输入框状态
 */

import xss from 'xss'
import Emoji from '/src/components/Emoji.vue'
import {ref} from "vue";
import {ElMessage} from "element-plus";

defineOptions({
  name: 'ReplyComment',
})

const emits = defineEmits(['reply', 'close', 'toggle'])


const commentLoading = ref(false) // 评论loading
const blurIndex = ref(0) // 评论表情插入位置
const commentsTextarea = ref('') // 评论内容
const showEmoji = ref(false) // emoji选择标志
const showNoFocus = ref(false)


/**
 * 输入框失去焦点
 */
function blurFun(eve) {
  blurIndex.value = eve.target.selectionEnd
}

/**
 * emoji 表情选择
 */
function selectEmoji(val) {
  if (commentsTextarea.value && commentsTextarea.value.length + val.length <= 2000 || !commentsTextarea.value) {
    const list = commentsTextarea.value.split('')
    list.splice(blurIndex.value, 0, val)
    commentsTextarea.value = list.join('')
    showEmoji.value = false
  }
}

/**
 * 提交评论评论
 */
function commentSubmit() {
  if (!commentsTextarea.value) {
    ElMessage.error({message: '评论内容不能为空'})
    return
  }
  emits('reply', xss(commentsTextarea.value))
}

/**
 * 关闭评论评论框
 */
function closeComment() {
  showEmoji.value = false
  emits('close')
  toggleFocus()
}

/**
 * 切换输入框状态
 */
function toggleFocus(flag) {
  if (typeof flag === 'boolean') {
    showNoFocus.value = flag
  } else {
    showNoFocus.value = !showNoFocus.value
  }
  emits('toggle', showNoFocus.value)
}


</script>


<style scoped lang="scss">
.reply-comment {
  border: 1px solid #e6e6e6;
  border-radius: $xr-border-radius-base;
  overflow: hidden;

  .btn-group {
    background-color: white;
    padding: 0 10px 5px 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .btn-box {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .smiling-img {
      cursor: pointer;
      font-size: 17px;
      color: #666;
    }
  }

  .el-textarea :deep( .el-textarea__inner) {
    resize: none;
    border: 0;
  }

  .no-focus {
    width: 100%;
    font-size: 13px;
    color: #c0c4cc;
    background-color: white;
    border-radius: $xr-border-radius-base;
    padding: 9px 8px;
    cursor: pointer;
  }
}
</style>
